<template>
    <div class="menu-container">
        <div class="control-area">
            <router-link to="/permission/menu-create">
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" v-has="'system:menu:add'">添加菜单</el-button>
            </router-link>
            <div style="float: right">
                <el-button @click="toggleExpand" size="small"> {{expand ? '收起全部' : '展开全部'}}</el-button>
            </div>
        </div>
        <el-table
            v-if="refreshTable"
            :data="menuTable"
            style="width: 100%"
            row-key="id"
            size="small"
            stripe
            border
            :default-expand-all="expand"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                prop="menuName"
                label="菜单名称"
                width="150">
            </el-table-column>
            <el-table-column
                prop="id"
                label="菜单ID"
                width="60"
                align="center">
            </el-table-column>
            <el-table-column
                prop="menuType"
                label="类型"
                width="100"
                align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.menuType === 'C'">菜单</span>
                    <span v-if="scope.row.menuType === 'M'">目录</span>
                    <span v-if="scope.row.menuType === 'F'">按钮</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="path"
                label="路由路径"
                width="130">
            </el-table-column>
            <el-table-column
                prop="component"
                label="组件路径">
            </el-table-column>
            <el-table-column
                prop="perms"
                label="权限"
                width="120">
            </el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                width="60"
                align="center">
                <template slot-scope="scope">
                    {{ scope.row.status === 0 ? '无效' : '有效' }}
                </template>
            </el-table-column>
            <!-- <el-table-column
                prop="hidden"
                label="显示"
                width="45"
                align="center">
                <template slot-scope="scope">
                    <svg-icon :icon-class="scope.row.hidden === 0 ? 'eye' : 'eye-open' "/>
                </template>
            </el-table-column> -->
            <el-table-column
                fixed="right"
                label="操作"
                width="145"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="updateRow(scope.$index, scope.row)"
                        type="primary"
                        plain
                        size="mini"
                        v-has="'system:menu:update'">
                        修改
                    </el-button>
                    <div style="margin-left: 10px; float: right">
                        <el-popconfirm title="确定删除？" @confirm="deleteRow(scope.$index, scope.row)">
                            <el-button
                                type="danger"
                                plain size="mini"
                                slot="reference">
                                删除
                            </el-button>
                        </el-popconfirm>
                    </div>

                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {getAllMenus, deleteMenu} from 'src/api/permission'

export default {
    name: "MenuList",
    data() {
        return {
            menuTable: [],
            refreshTable: true,
            expand: false
        }
    },
    activated() {
        this.getAllMenus()
    },
    methods: {
        getAllMenus() {
            getAllMenus().then(response => {
                this.menuTable = response.data
            })
        },
        deleteRow(index, row) {
            deleteMenu({id: row.id}).then(response => {
                this.getAllMenus()

                this.$message.success({
                    message: '菜单已删除成功',
                    duration: 2000,
                    center:true
                })
            })
        },
        updateRow(index, row) {
            this.$router.push({
                path: '/permission/menu-update',
                query: {id: row.id}
            })
        },
        toggleExpand() {
            this.refreshTable = !this.refreshTable
            this.expand = !this.expand
            this.$nextTick(() => {
                this.refreshTable = true
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.menu {
    &-container {
        margin: 30px;

        .control {
            &-area {
                margin-bottom: 8px;
            }
        }
    }
}
</style>
